<!--个人中心未登录注册页面-->
<template>
  <div class="wrapper">
    <!--背景图片-->
    <div class="Bg">
      <div class="bg"></div>
      <div class="bgtop">
        <a  href="">
          <img class="bgtu" src="../../assets/img/personal/touxiang.png" alt="">
        </a>
        <a href="">
          <span class="bgwen" @click="isOpen">登录/注册</span>
          <div class="zhang">账户提现</div>
        </a>

      </div>
    </div>
    <!--我的订单order-left-->
    <div class="order">
      <ul>
        <li class="order-left">我的订单</li>
        <li><a class="order-right">查看更多 ></a></li>
      </ul>
    </div>
    <hr>
    <!--待支付行-->
    <div class="pay">
      <ul>
        <li>
          <a href="">
            <img src="../../assets/img/personal/daizhifu.png" alt="">
            <p>
              <router-link :to="{name: 'daizhifu'}">待支付</router-link>
            </p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="../../assets/img/personal/daifahuo.png" alt="">
            <p>
              <router-link :to="{name: 'daifahuo'}">待发货</router-link>

            </p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="../../assets/img/personal/daishouhuo.png" alt="">
            <p>
              <router-link :to="{name: 'daishouhuo'}">待收货</router-link>

            </p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="../../assets/img/personal/jiaoyiwancheng.png" alt="">
            <p>
              <router-link :to="{name: 'jiaoyiwc'}">交易完成</router-link>

            </p>
          </a>
        </li>
      </ul>
    </div>
    <!--我的返金排号my-left-->
    <div class="my">
      <ul>
        <li class="my-left">我的返金排号
          <a class="my-right" href="">查看更多></a>
        </li>

      </ul>
    </div>
    <hr>
    <!--查看更多下拉-->
    <div class="more">
      <ul>
        <li>
          <p>2017/06/26</p>
          <p>消费: ￥ 100</p>
          <p>排号: 10</p>

        </li>
      </ul>
    </div>
    <hr>
    <!--我的神灯值-->

    <!---->

    <!--我的商城-->


    <!--实名认证-->

    <div class="my-shop">
    <ul >
      <li>
        <a href="">
          <img src="../../assets/img/personal/shimingrenzhneg.png" alt="">
          <p>实名认证</p>
        </a>
      </li>

    </ul>
    </div>
    <!--收货地址-->
    <ul class="my-shop">
      <li>
        <a href="">
          <img src="../../assets/img/personal/shouhuodizhi.png" alt="">
          <p>收货地址</p>
        </a>
      </li>

    </ul>
    <!--关注公众号-->
    <ul class="my-shop">
      <li >
        <a href="">
          <img src="../../assets/img/personal/guanzhugongzhonghao.png" alt="">
          <p>关注公众号</p>
        </a>
      </li>

    </ul>
    <!--客服与反馈-->
    <ul class="my-shop">
      <li>
        <a href="">
          <img src="../../assets/img/personal/kehufankui.png" alt="">
          <p>客服与反馈</p>
        </a>
      </li>

    </ul>


  <!--登录注册弹窗部分-->
    <div class="tan">
      <a class="guan" href="">x</a>
      <a class="login" href="">
        <p>登录</p>
      </a>
      <a  class="register" href="">
        <p>注册</p>
      </a>

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isOpen: false,
      }
    },
  }
</script>
<style scoped>

  .wrapper{
    width: 100%;
    height:27rem;

  }
  .Bg{

    width: 100%;
    position: relative;
  }
  .bg{
    height:6rem;
    background: pink ;
    background-size: 100% 100%;
  }
  .bgtu{
    width: 2.3rem;
    height:2.3rem;
    position: absolute;
    left:2%;
    top:19%;
  }
  .bgwen{
    color: white;
    font-size: 0.8rem;
    font-weight:100;
    position: absolute;
    left:17%;
    top:29%;
  }

  .zhang{
    color: white;
    font-size: 0.7rem;
    font-weight:100;
    position: absolute;
    left:75%;
    top:70%;
    background-color: #e53e42;
    border-radius:2rem;
  }
  /*<!--我的订单-->*/
  .order{
    height:2rem;
    overflow: hidden;
  }
  .order ul {
    position: relative;
  }
  .order-left{
    font-size: 0.9rem;
    font-weight: 300;
    position: absolute;
    left: 3%;
    top:1%;
  }
  .order-right{
    font-size: 0.7rem;
    font-weight: 200;
    float: right;
    position: absolute;
    left: 76%;
    top:10%;
  }
  .pay{
    height:2.3rem;
  }
  .pay ul{
    margin-left: 0.09rem;

  }
  .pay ul li{
    display:inline-block;
    font-size: 0.6rem;
    text-align: center;
    margin-left: 1.5rem;
  }
  .pay a{
    color: #4d4d4d;
    line-height: 0.95rem;
    letter-spacing: 0.03rem;
  }
  .pay a img {
    width:1.1rem;
  }
  /*<!--我的返金排号-->*/
  .my{
    height:2.4rem;
    /*overflow: hidden;*/
  }
  .my-left{
    font-size: 0.8rem;
    padding-top: 1rem;
  }
  .my-right{
    font-size:0.7rem;
    float: right;
    padding-top: 0.1rem;
    color: #4d4d4d;
  }

  .more ul li p{
    display: inline-block;
    font-size:0.7rem;
    padding-left: 1rem;
  }
  /*/*我的神灯值*! "my-total"my-top my-bottom"*/

  /*我的商城*/

  .my-shop {
    display: inline-block;
    font-size: 0.6rem;
    text-align: center;
    margin-left: 0.9rem;
    margin-top: 0.5rem;
  }
  .my-shop li a {
    color: #4d4d4d;
  }
  .my-shop li a img{
    width:1rem;
  }
/*弹窗*/
  .tan{
    width:100%;
    height:9rem;
    background: gainsboro;
  }
  .tan a{
    color: grey;
  }
  .tan a:hover{
    color: white;
  }
  .guan{
    margin-left: 15rem;
  }
  .login{
    display: block;
    background: white;
    font-size: 0.8rem;
    width:12rem;
    height:1.4rem;
    border-radius: 2rem;
    text-align: center;
    margin-top: 2.5rem;
    margin-left: 2rem;
    font-weight:100;


  }
  .login:hover{
    background: #e53e42;
  }
  .register{
    display: block;
    background: white;
    font-size: 0.8rem;
    width:12rem;
    height:1.4rem;
    border-radius: 2rem;
    text-align: center;
    margin-top: 1rem;
    margin-left: 2rem;
    font-weight:100;

  }
  .register:hover{
    background: #e53e42;
  }
</style>
